// 导航栏部分
window.onload = function () {
    // 当点击某一个li的时候，该li添加下边线  bottomColor
    var lis = document.querySelectorAll(".aside .nav .nav li");
    var Aa = document.querySelectorAll(".aside .nav .nav li a");
    var oUl = document.querySelectorAll(".aside .nav .nav li ul");


    var oVisitRegistration=document.querySelector('.visit-registration');
    var oVisitA=document.querySelector('.visit-a');
    var oVisitUL=document.querySelector('.visit-registration ul')
    // var oVisitLi=document.querySelectorAll('.visit-registration li')
    var oVisitLiA=document.querySelectorAll('.visit-registration li a')
    // 当前导航栏状态
    function visitFn(){
      oVisitA.classList.add('blue');
      oVisitUL.style.height=oVisitUL.children[0].offsetHeight * oVisitUL.children.length + "px";
        oVisitLiA[0].classList.add('blue');
    }
    visitFn();
  
  
    for (var i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].addEventListener("click", function () {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        this.className = "bottomColor";
      });
    }
    // 让a字体改变颜色
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].addEventListener("click", function () {
        for (var i = 0; i < Aa.length; i++) {
          Aa[i].classList.remove("blue");
        }
        this.classList.add("blue");
      });
    }
    // 显示与隐藏
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].onclick = function () {
        var uls = this.nextElementSibling;
        if (getComputedStyle(uls).height == "0px") {
          for (var j = 0; j < oUl.length; j++) {
            oUl[j].style.height = "0px";
          }
          uls.style.height =
            uls.children[0].offsetHeight * uls.children.length + "px";
        } else {
          uls.style.height = "0px";
        }
      };
    }
  };








// 页面中的数据
var data=[
    {
        order:1,
        name:'啵啵1',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    {
        order:2,
        name:'啵啵2',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    {
        order:3,
        name:'啵啵3',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    {
        order:4,
        name:'啵啵4',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    {
        order:5,
        name:'啵啵5',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    {
        order:6,
        name:'啵啵6',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    {
        order:7,
        name:'啵啵7',
        number:'川A88888',
        residents:'成都',
        temperature1:'36.2',
        time1:'2020-02-07 9：00：00',
        remark:'探望生病的亲戚',
        time2:'2020-02-07 21：00：00',
    },
    
];

/* 
    1.获取元素，tbody,分页容器，上一页，下一页，数据文本，页，每页数据
    2.渲染
*/
// 当前的页码
var page=1;
// 每页的条数
var count=5;
// 获取tbody
var oTbody=document.querySelector('tbody');
// 获取分页容器
var oPagination=document.querySelector('.pagination');
// 获取上一页的按钮
var oPrevBtn=document.querySelector('.prev');
// 获取下一页的按钮
var oNextBtn=document.querySelector('.next')
// 获取数据文本
var aTotalPages=document.querySelector('.total-pages');
var aTotalData=document.querySelector('.total-data');
// 搜索功能
var oSearchInp=document.querySelector('.name-inp');
var oSearchBtn=document.querySelector('.search');
var oResetBtn=document.querySelector('.reset');
// 页面初始化渲染功能
function render(){
    // 查看搜索框内容
    var str=oSearchInp.value;
    var searchArr=[];
    if(str.trim()==''){
        searchArr=data;
    }else{
        for(var i=0;i<data.length;i++){
            if(data[i].name.includes(str)){
                searchArr.push(data[i]);
            }
        }
    }
    oTbody.innerHTML='';
    // 没一页的数据
    var renderArr=searchArr.slice((page-1)*count,page*count);

    // 插入数据
    for(var i=0;i<renderArr.length;i++){
        var oTr=document.createElement('tr');
        oTr.innerHTML=`
        <td>${renderArr[i].order}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].number}</td>
        <td>${renderArr[i].residents}</td>
        <td>${renderArr[i].temperature1}</td>
        <td>${renderArr[i].time1}</td>
        <td>${renderArr[i].remark}</td>
        <td>${renderArr[i].time2}</td>
        <td>
            <button class="btn btn-primary edit">编辑</button>
            <button class="btn btn-danger del">删除</button>
        </td>
        `;

        oTbody.appendChild(oTr);
    }

    // 渲染页码
    var aPageBtn=document.querySelectorAll('.pageBtn');
    // 删除所有页码
    for(var i=0;i<aPageBtn.length;i++){
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    // 根据数据创建页码
    for(var i=1;i<=Math.ceil(searchArr.length/count);i++){
        var oLi=document.createElement('li');

        oLi.innerHTML=`<a class="pageBtn" href="#">${i}</a>`;
        // 在下一页前面插入页码
        oPagination.insertBefore(oLi,oPagination.lastElementChild);

        if(i==page){
            oLi.classList.add('active');
        }
    }

    aTotalPages.innerHTML='共'+Math.ceil(searchArr.length/count)+'页';
    aTotalData.innerHTML=searchArr.length+'条数据';
}
render();

// 给分页加事件
oPagination.addEventListener('click',changePage);
function changePage(){
    if(event.target.className=='pageBtn'){
        page=event.target.innerHTML;
        render();
    }
}

// 给上一页和下一页加事件
oPrevBtn.addEventListener('click',prevFn);
oNextBtn.addEventListener('click',nextFn);
function prevFn(){
    if(page>1){
        page--;
        render();
    }
}
function nextFn(){
    if(page<Math.ceil(data.length/count)){
        page++;
        render();
    }
}

// 删除功能
oTbody.addEventListener('click',delFn);
function delFn(){
    if(event.target.className.includes('del')){
        var order=event.target.parentNode.parentNode.children[0].innerHTML;
        for(var i=0;i<data.length;i++){
            if(data[i].order==order){
                data.splice(i,1);
            }
        }
        render();
    }
}
//搜索
oSearchBtn.addEventListener('click',searchFn);
function searchFn(){
    page=1;
    render();
}
// 重置
oResetBtn.addEventListener('click',function(){
    oSearchInp.value='';
    searchFn();
})









// 让登记页面与信息页面的显示和隐藏
var aRegistration=document.querySelector('.registration');
var oListPage=document.querySelector('.list-page');
var oCheckPage=document.querySelector('.checkin-page');
var aReturn=document.querySelector('.return');
// 
var oMask=document.querySelector('.mask');
var oSave=document.querySelector('.save');
var oIsSave=document.querySelector('.issave');

aRegistration.addEventListener('click',appearFn)
function appearFn(){
    oListPage.style.display='none';
    oCheckPage.style.display='block';
}
aReturn.addEventListener('click',returnFn)
function returnFn(){
    oIsSave.style.display='block';
}
// 确认是否修改
var oSure=document.querySelector('.sure');
var oCancel=document.querySelector('.cancel');
oSure.addEventListener('click',sureFn);
function sureFn(){
    if(oSubmitBtn.style.display=='block'){
        submitFn();
    }else{
        edit();
    }
    oIsSave.style.display='none';
    oSave.style.display='block';
    setTimeout(hideFn,1000);
}
oCancel.addEventListener('click',hideFn);

function hideFn(){
    oListPage.style.display='block';
    oCheckPage.style.display='none';
    if(oSubmitBtn.style.display=='none'){
        oSubmitBtn.style.display='block';
        oEditBtn.style.display='none';
    }
    oMask.style.display='none';
    oSave.style.display='none';
    oIsSave.style.display='none';
    // 清空输入框的文本
    document.querySelector('.order').value='';
    document.querySelector('.name').value='';
    document.querySelector('.number').value='';
    document.querySelector('.address').innerHTML='';
    document.querySelector('.temperature1').value='';
    document.querySelector('.remark').value='';
    document.querySelector('.time1').value='';
    document.querySelector('.time2').value='';
   
}

// 刷新页面
var oRefresh=document.querySelector('.refresh');
oRefresh.addEventListener('click',function(){
    location.reload();
})




// 登记页面内容
var oPlaceContainer=document.querySelector('.place-container');
var oPlaceSelect=document.querySelector('.place-select');
var oLi=document.querySelectorAll('.place li');

oPlaceSelect.addEventListener('click',function(){
    oPlaceContainer.style.display='block';
    event.cancelBubble=true;
})

for(var i=0;i<oLi.length;i++){
    oLi[i].onclick=function(){
        oPlaceContainer.style.display='none';
        oPlaceSelect.children[0].innerHTML=this.innerHTML;
    }
}

document.addEventListener('click',function(){
    oPlaceContainer.style.display='none';
})

// 添加信息
var oSubmitBtn=document.querySelector('.submit-btn');

oSubmitBtn.addEventListener('click',submitFn);
function submitFn(){
        var addOrder=document.querySelector('.order').value;
        var addName=document.querySelector('.name').value;
        var addNumber=document.querySelector('.number').value;
        var addTemperature1=document.querySelector('.temperature1').value;
        var addRemark=document.querySelector('.remark').value;
        var addTime1=document.querySelector('.time1').value;
        var addTime2=document.querySelector('.time2').value;
        var addAddress=document.querySelector('.address').innerHTML;
        data.push({
            order:addOrder,
            name:addName,
            number:addNumber,
            temperature1:addTemperature1,
            time1:addTime1,
            residents:addAddress,
            time2:addTime2,
            remark:addRemark,
        })
        oMask.style.display='block';
        oSave.style.display='block';
    render();
    setTimeout(hideFn,1000);
}



// 修改信息
var oEditBtn=document.querySelector('.edit-btn');
oTbody.addEventListener('click',editFn);
function editFn(){
    if(event.target.className.includes('edit')){
        appearFn();
        var order=event.target.parentNode.parentNode.children[0].innerHTML;
        // 找到对应的order
        for(var i=0;i<data.length;i++){
            if(data[i].order==order){
                document.querySelector('.order').value=data[i].order;
                document.querySelector('.name').value=data[i].name;
                document.querySelector('.number').value=data[i].number;
                document.querySelector('.temperature1').value=data[i].temperature1;
                document.querySelector('.remark').value=data[i].remark;
                document.querySelector('.time1').value=data[i].time1;
                document.querySelector('.time2').value=data[i].time2;
                document.querySelector('.address').innerHTML=data[i].residents;
            }
        }
    }
    oSubmitBtn.style.display='none';
    oEditBtn.style.display='block';
}
oEditBtn.addEventListener('click',edit);
function edit(){
    var order=document.querySelector('.order').value;
    
    for(var i=0;i<data.length;i++){
        if(data[i].order==order){
            data[i].name=document.querySelector('.name').value;
            data[i].number=document.querySelector('.number').value;
            data[i].temperature1=document.querySelector('.temperature1').value;
            data[i].remark=document.querySelector('.remark').value;
            data[i].time1=document.querySelector('.time1').value;
            data[i].time2=document.querySelector('.time2').value;
            data[i].residents=document.querySelector('.address').innerHTML;
        }
    }
    oMask.style.display='block';
    oSave.style.display='block';
    render();
    setTimeout(hideFn,1000);
    
}




  
  
  
  